<template>
	<div>
		<vm-common-header
	      :pageTitle="pageTitle"
	      :goBack="goBack"></vm-common-header>
	      <div class="vm-cloud-container">
		      <ul class="vm-cloudNav-container">
		      	<li>实时数据</li>
		      	<li @click="$router.push({name: 'znzz_device_category'})">设备分类管理</li>
		      	<li @click="$router.push({name: 'znzz_communication_device'})">通讯设备管理</li>
		      	<router-link tag="li" to="/early_warning_manage">报警预报</router-link>
		      	<li>统计分析报表</li>
		      	<li>设备状态检修</li>
		      </ul>
		      <div class="vm-cloudBanner-container">
            <mt-swipe :auto="4000">
              <mt-swipe-item><img src="../../../static/images/ManufacturingCloud/banner.png"></mt-swipe-item>
              <mt-swipe-item><img src="../../../static/images/ManufacturingCloud/banner02.png"></mt-swipe-item>
            </mt-swipe>
          </div>
		      <ul class="vm-cloudTabOptions-container">
		      	<li @click="openOption(1)">所有项目</li>
		      	<li @click="openOption(2)">所有设备</li>
		      	<li @click="openOption(3)">所有测量单位</li>
		      	<div class="allproject" v-show="indexOption == 1">
	      			<h6>所有项目</h6>
	      			<ul>
	      				<li>项目A</li>
	      				<li>项目B</li>
	      				<li>项目C</li>
	      				<li>项目D</li>
	      				<li>项目E</li>
	      				<li>项目F</li>
	      			</ul>
	      		</div>
            <div class="allDevice" v-show="indexOption == 2">
              <div class="allDevice-one">
                <div class="allDevice-t">
                  <div class="allDevice-t-l">
                    <ul>
                      <li class="active">设备编码</li>
                      <li>设备名称</li>
                    </ul>
                  </div>
                  <div class="allDevice-t-r">
                    <input type="text" placeholder="请输入设备编码">
                  </div>
                </div>
                <div class="allDevice-b">
                  <x-button>清除</x-button>
                  <x-button>查询</x-button>
                </div>
              </div>
              <div class="allDevice-two">
                <ul>
                  <li>
                    <span>
                      <input type="checkbox">
                      <em>S-02</em>
                    </span>
                    <em>设备B</em>
                  </li>
                  <li class="active">
                    <span>
                      <input type="checkbox">
                      <em>S-02</em>
                    </span>
                    <em>设备B</em>
                  </li>
                  <li>
                    <span>
                      <input type="checkbox">
                      <em>S-03</em>
                    </span>
                    <em>设备C</em>
                  </li>
                </ul>
              </div>
            </div>
		      	<div class="measuringUnit" v-show="indexOption == 3">
	      			<ul>
	      				<li><input type="checkbox" name="">电压</li>
	      				<li><input type="checkbox" name="">电阻</li>
	      				<li><input type="checkbox" name="">电偶</li>
	      				<li><input type="checkbox" name="">位移</li>
	      			</ul>
	      		</div>
		      </ul>
		      <div class="vm-coludContent-container">
		      	<div class="coludContentItem" v-for="n in 15" :key="n">
		      		<div class="item-left">
		      			<h5>位号名称A</h5>
		      			<router-link tag="em" to="point_details">688.2</router-link>
		      			<h5>点位号A</h5>
		      		</div>
		      		<div class="item-right">
		      			<h5>89%</h5>
		      			<em></em>
		      			<h5>伏特</h5>
		      		</div>
		      	</div>
		      </div>
	    </div>
	</div>
</template>

<script type="text/javascript">
	import { Popup, XButton  } from 'vux'
	import vmCommonHeader from '@/components/vm-common-header' // header 组件
	export default {
		data () {
			return {
				pageTitle: this.$route.meta.pageTitle,
		        goBack: this.$route.meta.goBack,
		        indexOption: null
			}
		},
		methods: {
			openOption (index) {
				if (this.indexOption == index) {
					this.indexOption = null;
				} else {
					this.indexOption = index;
				}
			},
		},
		components: {
      'vm-common-header': vmCommonHeader,
      Popup,
      XButton
		}
	}
</script>

<style type="text/css" scoped>
	#app {
		background: #ffffff;
	}
	.vm-cloud-container {
		height: 100%;
		overflow: scroll;
	}
	.vm-cloudNav-container {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin: 20px 10px 15px 10px;
		border-radius: 15px;
		overflow: hidden;
	}
	.vm-cloudNav-container li {
		width: 33.333%;
		height: 104px;
		background: #53c5e6;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32px;
		color: #ffffff;
		border-right: 2px solid #ffffff; /* no */
		border-bottom: 2px solid #ffffff; /* no */
	}
	.vm-cloudNav-container li:nth-child(3),
	.vm-cloudNav-container li:nth-child(6) {
		border-right: none;
	}
	.vm-cloudNav-container li:nth-child(4),
	.vm-cloudNav-container li:nth-child(5),
	.vm-cloudNav-container li:nth-child(6) {
		border-bottom: none;
	}
	.vm-cloudBanner-container {
		width: 100%;
		height: 200px;
    background-size: 100% 100%;
	}
  .vm-cloudBanner-container img {
    width: 100%;
    height: 100%;
  }
	.vm-cloudTabOptions-container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15px;
		margin: 15px 10px 10px 10px;
		background: url("../../../static/images/ManufacturingCloud/Rectangle.png") no-repeat;
		background-size: 730px 80px;
	}
	.vm-cloudTabOptions-container > li {
		font-size: 24px;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		border-right: 2px solid #ffffff; /* no */
	}
	/* 所有项目弹框 */
	.vm-cloudTabOptions-container .allproject {
		position: absolute;
		top: 90px;
		left: 0;
		width: 730px;
		z-index: 999;
		background-color: #ffffff;
	}
	.vm-cloudTabOptions-container .allproject h6{
		background-color: #eeeeee;
		font-size: 28px;
		color: #333333;
		height: 80px;
		display: flex;
		align-items: center;
		text-align: left;
		padding-left: 55px;
	}
	.vm-cloudTabOptions-container .allproject > ul {}
	.vm-cloudTabOptions-container .allproject > ul li{
		font-size: 24px;
		display: flex;
		align-items: center;
		height: 80px;
		border-bottom: 1px solid #eeeeee; /* no */
		margin-left: 25px;
		padding-left: 70px;
		text-align: left;
	}
  /* 所有设备 */
  .allDevice {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: 9.733333rem;
    z-index: 999;
    background-color: #ffffff;
  }
  .allDevice .allDevice-one  {
    border-bottom: 10px solid #d0d0d0;
  }
  .allDevice .allDevice-t {
    flex: 1;
    display: flex;
  }
  .allDevice .allDevice-b{
    border-top: 1px solid #eeeeee; /* no */
    display: flex;
    flex-direction: row;
    height: 120px;
    justify-content: center;
    align-items: center;
  }
  .allDevice .allDevice-b button {
    margin: 0;
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }
  .allDevice .allDevice-b button:first-child {
    background-color: #eeeeee;
    color: #666666;
    margin-right: 60px;
  }
  .allDevice .allDevice-b button:last-child {
    background-color: #fd955b;
    color: #ffffff;
  }
  .allDevice .allDevice-t-l ul {
    display: flex;
    flex-direction: column;
  }
  .allDevice .allDevice-t-l ul li {
    width: 240px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #666666;
    border-top: 1px solid #eeeeee; /* no */
  }
  .allDevice .allDevice-t-l ul li.active {
    color: #333333;
    background-color: #eeeeee;
  }
  .allDevice .allDevice-t-r {
    flex: 1;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #eeeeee; /* no */
  }
  .allDevice .allDevice-t-r input {
    border-radius: 15px;
    padding: 0;
    margin: 0;
    margin-left: 25px;
    background-color: #eeeeee;
    font-size: 28px;
    color: #999999;
    height: 80px;
    line-height: 80px;
    padding-left: 40px;
  }
  .allDevice .allDevice-two ul{
    display: flex;
    flex-direction: column;
  }
  .allDevice .allDevice-two ul li {
    height: 80px;
    display: flex;
    align-items: center;
    color: #666666;
    padding-left: 70px;
  }
  .allDevice .allDevice-two ul li > span {
    width:auto;
  }
  .allDevice .allDevice-two ul li.active {
    background-color: #eeeeee;
    color: #000000;
  }
  .allDevice .allDevice-two ul li > span > em {
    font-size: 28px;
  }
  .allDevice .allDevice-two ul li > span input {
    margin-right: 30px;
  }
  .allDevice .allDevice-two ul li > em {
    margin-left: 50px;
    text-align: left;
    font-size: 28px;
    flex: 1;
  }
    /* 量测单位 */
	.vm-cloudTabOptions-container .measuringUnit {
		position: absolute;
		top: 90px;
		right: 0;
		width: 730px;
		z-index: 999;
		background-color: #ffffff;
	}
	.vm-cloudTabOptions-container .measuringUnit ul li{
		height: 80px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eeeeee;
		margin-left: 25px;
		padding-left: 30px;
		font-size: 30px;
		color: #333333;
	}
	.vm-cloudTabOptions-container li:last-child {
		border-right: none;
	}

	.vm-coludContent-container {
		display: flex;
		flex-wrap: wrap;
		margin: 0 10px;
	}
	.vm-coludContent-container .coludContentItem{
		display: flex;
		width: 33.333%;
		flex-direction: row;
		background-color: #000000;
		padding: 20px 15px 15px 15px;
		height: 200px;
		border-right:2px solid #ffffff; /* no */
		border-bottom:2px solid #ffffff; /* no */
	}
	.vm-coludContent-container .coludContentItem:nth-of-type(3n+0) {
		border-right:none;
	}
	.vm-coludContent-container .coludContentItem .item-left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 25px;
	}
	.vm-coludContent-container .coludContentItem .item-left h5 {
		font-size: 28px;
		color: #ffffff;
	}
	.vm-coludContent-container .coludContentItem .item-left em {
		font-size: 22px;
		color: #ffff00;
	}
	.vm-coludContent-container .coludContentItem .item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.vm-coludContent-container .coludContentItem .item-right h5 {
		font-size: 28px;
		color: #ffffff;
	}
	.vm-coludContent-container .coludContentItem .item-right em {
		font-size: 22px;
		color: #ffff00;
	}
</style>
